<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>图片滚动</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="../jquery-1.8.3.js"></script>
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    body {
        font: 12px;
        margin: 20px auto;
    }

    ul {
        list-style-type: none;
    }

    img {
        border: 1px solid #EEEEEE;
    }

    a {
        outline: none;
    }

    #imgs {
        width: 500px;
        margin: 0px auto;
    }

    .mid {
        width: 400px;
        border: 1px solid #999999;
        position: relative;
    }

    .mid ul {
        width: 400px;
        height: 180px;
        background: #CCCCCC;
        position: relative;
        overflow: hidden;
    }

    .mid ul li {
        width: 400px;
        position: absolute;
        left: 490px;
        top: 0;
    }

    .mid ul li.first {
        left: 0;
    }

    #img_list {
        position: absolute;
        bottom: 15px;
        right: 10px;
        height: 20px;
        background: #FFFFFF;
    }

    #img_list a {
        display: block;
        width: 14px;
        height: 14px;
        border: 1px solid #CCCCCC;
        float: left;
        padding: 3px;
        text-align: center;
        text-decoration: none;
    }

    #img_list a:hover, #img_list a:active {
        background: red;
    }

    .active {
        background: red;
    }
</style>
<script type="text/javascript">
    var curr = 0, next = 0, count = 0;

    $(function() {
        // 记录图片的数量
        count = $('#img_list a').size();
        t = setInterval('imgPlay()', 3000);

        // 鼠标移动到图片或导航上停止播放，移开后恢复播放
        $('#imgs li, #img_list a').hover(function () {
            clearInterval(t);
        }, function () {
            t = setInterval('imgPlay()', 3000);
        });

        //点击导航播放到相应的图片
        $('#img_list a').click(function () {
            // index()函数返回当前导航的下标
            var index = $('#img_list a').index(this);
            if (curr != index) {
                play(index);
                curr = index;
            }
            return false;
        });
    });

    // 播放图片的函数
    function imgPlay() {
        next = curr + 1;

        // 若当前图片播放到最后一张，这设置下一张要播放的图片为第一张图片的下标
        if (curr == count - 1) {
            next = 0;
        }
        play(next);
        curr++;

        // 在当前图片的下标加1后，若值大于最后一张图片的下标，则设置下一轮其实播放的图片下标为第一张图片的下标，而next永远比curr大1
        if (curr > count - 1) {
            curr = 0; next = curr + 1;
        }
    }

    // 控制播放效果的函数
    function play(next) {
        // 当前的图片滑到左边-500px，完成后返回到右边490px
        // 下一张图片滑到0px处，完成后导航的焦点切换到下一个点上
        $('#imgs li').eq(curr).css({ 'opacity': '0.5' }).animate({ 'left': '-500px', 'opacity': '1' }, 'slow', function () {
            $(this).css({ 'left': '490px' });
        }).end()
        .eq(next).animate({ 'left': '0px', 'opacity': '1' }, 'slow', function () {
            $('#img_list a').siblings('a').removeClass('active').end().eq(next).addClass('active');
        });
    };
</script>
</head>
<body>
    <div id="imgs">
        <div class="mid">
            <ul>
                <li class="first"><a href="#"><img src="./img/1.png" alt="1" /></a></li>
                <li><a href="#"><img src="./img/2.jpg" alt="2" /></a></li>
                <li><a href="#"><img src="./img/3.jpg" alt="3" /></a></li>
                <li><a href="#"><img src="./img/4.jpg" alt="4" /></a></li>
            </ul>
            <div id="img_list">
                <a href="#1" class="active">1</a>
                <a href="#2">2</a>
                <a href="#3">3</a>
                <a href="#4">4</a>
            </div>
        </div>
    </div>
</body>
</html>
